<template>
  <h1>姓名：{{ name }}</h1>
  <h1>年龄：{{ age }}</h1>
  <h2>工作类型：{{ jobObj.type }}</h2>
  <h2>工资薪水：{{ jobObj.salary }}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  name: "App",
  setup() {
    let name = ref("lwt");
    let age = ref(18);
    let jobObj = reactive({
      type: "前端程序猿",
      salary: "30w",
    });

    function changeInfo() {
      name.value = "zl";
      age.value = 20;
      // // console.log(name, age);
      jobObj.type = "Java程序媛";
      jobObj.salary = "40w";
      // console.log(jobObj);
    }

    return {
      name,
      age,
      changeInfo,
      jobObj,
    };
  },
};
</script>

<style>
</style>
